<template>
	<div class="login-register note" :style="note">
		<div class="contain">
			<div class="big-box" :class="{active:isLogin}">
				<div class="big-contain" v-if="isLogin">
					<div class="btitle" style="margin-top:13px;">学者身份认领</div>
					<div class="bform">
						<input type="name" placeholder="学者姓名" v-model="form.username">
						<input type="email" placeholder="邮箱" v-model="form.useremail">
						<span class="errTips" v-if="emailError">* 邮箱填写错误 *</span>
						
						
					</div>

					<button class="bbutton" @click="register">获取验证码</button>

				</div>
			
			</div>
			<div class="small-box" :class="{active:isLogin}">
				<div class="small-contain" v-if="isLogin">
					<div class="stitle">你好，朋友!</div>
					<p class="scontent">你就是传说中的大学者吗？</p>
	
				</div>
				<div class="small-contain" v-else>
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">与我们保持联系，请登录你的账户</p>
				</div>
			</div>
			<el-dialog title="邮箱验证" :visible.sync="dialogVisible" width="50%">
				<span>填写邮箱验证码</span>
				<br><br>
				<el-input v-model="userverify"></el-input>
				<span class="errTips" v-if="verifyingerr">* 验证码有误！ *</span>
				<span class="errTips" v-if="verifyingTLE">* 验证码超时，已重新发送至该邮箱！ *</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="check()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'

	export default {
		name: 'login-register',
		data() {
			return {
				isLogin: true,
				dialogVisible: false,
				emailError: false,
				emailre: false,
				passwordError: false,
				existed: false,
				pwd2re: false,
				emailerr: false,
				verifyingerr: false,
				verifyingTLE: false,
				verificationCode: '',
				userverify: '',
				form: {
					username: '',
					useremail: '',
					userpwd: '',
					againuserpwd: ''
				},
				note: {
					// backgroundImage: "url(" + require("../assets/groud.jpeg") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "1700px auto",
					marginTop: "5px",
				}
			}
		},
		methods: {
			check() {
				
				if (this.userverify !== this.verificationCode) {
					this.verifyingerr = true;
				}else{
					this.verifyingerr = false;
					this.$store.state.ifyanzheng =true;
					const self = this;
					self.axios({
							method: 'post',
							url: '/renzheng/',
							data: {
								name: self.$store.state.username,
								author:this.form.username
							},
							headers: {
								'X-CSRFToken': this.getCookie('csrftoken')
							},
						}).then(res=>{
							if(res.data.code===0){
								this.$store.state.yanzhengxuezhename=this.form.username
								this.$message(this.form.username+",身份认证成功")
								console.log(res.data)
								this.$store.state.drawer=false
							}
							else{
								this.$message(res.data.msg)
							}
						})
				}
				
				
			},
			changeType() {
				this.isLogin = !this.isLogin
				this.form.username = ''
				this.form.useremail = ''
				this.form.userpwd = ''
			},
			login() {
				console.log("这里开始验证")
				const self = this;
				if (self.form.useremail != "" && self.form.userpwd != "") {
					self.axios({
							method: 'post',
							url: '/login/',
							data: {
								email: self.form.useremail,
								password: self.form.userpwd,
							},
							headers: {
								'X-CSRFToken': this.getCookie('csrftoken')
							},
						}).then(res => {
							var obj = res.data
							switch (obj.code) {
								case 0:
									this.emailre = false;
									this.passwordError = false;
									this.form.username = obj.username;
									this.$store.state.isLogin = true;
									this.$store.state.username = obj.username;
									this.$store.useremail=self.form.useremail;
									this.$router.push({
										path: '/'
									});
									break;
								case -1:
									this.emailError = true;
									break;
								case 1:
									this.passwordError = true;
									break;
								case 2:
									this.$message.error('该用户已登录');
									break;
							}
						})
						.catch(err => {
							console.log(err);
						})
				} else {
					this.$message.error('填写不能为空');
				}
			},
			getCookie(name) {
				var value = '; ' + document.cookie
				var parts = value.split('; ' + name + '=')
				if (parts.length === 2) return parts.pop().split(';').shift()
			},
			register() {
				const self = this;
				if (self.form.useremail == "" ) {
					// alert("填写不能为空!！");
					this.$message.error('填写不能为空');
				} else if (self.form.useremail.search(".+@.+\.cn") == -1 && self.form.useremail.search(".+@yeah.net") == -
					1) {
					// alert("邮箱格式有误！");
					this.emailerr = true;
					// this.$message.error('邮箱格式有误！');
				} else {
					this.emailError = false
					this.emailre = false
					this.passwordError = false
					this.existed = false
					this.pwd2re = false
					this.emailerr = false
					this.existed = false
					this.dialogVisible = true;
					self.axios({
							method: 'post',
							url: '/email2/',
							headers: {
								'X-CSRFToken': this.getCookie('csrftoken')
							},
							data: {
								// username: self.form.username,
								email: self.form.useremail,
								// password: self.form.userpwd,
							},
						})
						.then(res => {
							var obj = res.data;
							switch (obj.code) {
								case 0:
									this.existed = false;
									this.verificationCode = obj.verifycode;
					
									break;
								case -1:
									this.$message("请输入学校认证邮箱！")
									this.existed = true;
									break;
								
							}
						})
						.catch(err => {
							console.log(err);
						})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	
	body{
		background: url(../assets/2.jpg) no-repeat;
		background-size: 100%;
	}
	
	.login-register {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	.contain {
		width: 60%;
		height: 70%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 0 3px #f0f0f0,
			0 0 6px #f0f0f0;
	}

	.big-box {
		width: 70%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30%;
		transform: translateX(0%);
		transition: all 1s;
	}

	.big-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btitle {
		font-size: 1.5em;
		font-weight: bold;
		color: #4ca9df;
	}

	.bform {
		width: 100%;
		height: 50%;
		padding: 10px 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		/* border: solid; */
		margin: 1em;
	}

	.bform .errTips {
		display: block;
		width: 50%;
		text-align: left;
		color: red;
		font-size: 0.7em;
		margin-left: 1em;
	}

	.bform input {
		width: 50%;
		height: 30px;
		border: none;
		outline: none;
		border-radius: 10px;
		padding-left: 2em;
		background-color: #f0f0f0;
		margin: 5px;
	}

	.bbutton {
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		/* background-color: rgb(57, 167, 176); */
		background-color: #4ca9df;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}

	.small-box {
		width: 30%;
		height: 100%;
		/* background: linear-gradient(135deg, rgb(57, 167, 176), rgb(56, 183, 145)); */
		background: linear-gradient(135deg, #0c7bb3, #f2bae8);
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(0%);
		transition: all 1s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}

	.small-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.stitle {
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
	}

	.scontent {
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 2em 4em;
		line-height: 1.7em;
	}

	.sbutton {
		width: 60%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: transparent;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}

	.big-box.active {
		left: 0;
		transition: all 0.5s;
	}

	.small-box.active {
		left: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: inherit;
		border-bottom-right-radius: inherit;
		transform: translateX(-100%);
		transition: all 1s;
	}
</style>
